<template>
	<div class="mainContent">
		<pathTracking :path="Model.path" />
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab">
				<el-tab-pane label="盘点单详情" name="1"></el-tab-pane>
			</el-tabs>
			<div class="tabBox">
				<div class="detailsTabsBtn" v-if="Model.OutofstockBtn == 0">
					<p class="itemBtn" @click="BegainInventory">开始盘点</p>
				</div>
				<el-row class="detailTable">
					<el-form :inline="true">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tabFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<div class="tabBoxStep">
					<el-steps :active="Model.stepOption.activeStep">
						<el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.stepOption.step" :key="index"></el-step>
					</el-steps>
				</div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
						<p class="text">盘点单信息</p>
						<img class="detailTableImgNormal" :src="Model.detailTableFrom.src" alt="" @click="toggleTableDetail('detailTableFrom')">
					</div>
					<el-form :inline="true" v-show="Model.detailTableFrom.flag">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormResult" :key="index"  v-show="Model.haveresult">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<!-- **********************************************               出库详情                   ************************************** -->
				<div>
					<!--盘点操作时 -->
					<div v-if="Model.Outofstock == 0">
						<div class="OutofstockSearch">
							<el-row class="rows basic">
								<el-col :sm="12" :md="8" :lg="6">
									<el-input class="input-cont" v-model="Model.writeSku" placeholder="请扫码入库/输入SKU" @keyup.enter.native="checkSku"></el-input>
								</el-col>
								<el-col :sm="12" :md="8" :lg="6">
									<div class="items">
										<div class="btn" @click="checkSku">确认</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>	
					<!--盘点详情 -->
					<div>
						<el-row class="detailTable">
							<div class="detailTableItemTitle">
								<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
								<p class="text">盘点明细</p>
                                <div class="tableItemTitleNumber" v-if="Model.Outofstock == 0">
                                    <div class="num">{{Model.fiNum}}</div>
                                    <div class="gl">/</div>
                                    <div class="numall">{{Model.allNum}}</div>
                                </div>
							</div>
							<div class="detailTableDetail">
								<el-table :data="Model.tableData" border style="width: 100%">
									<el-table-column type="index" width="50" label="序号" fixed></el-table-column>
                                    <el-table-column fixed prop="countingResults" label="盘点结果" width="140" v-if="Model.Outofstock == 1">
                                        <template slot-scope="scope">
                                            <p>{{scope.row.countingResults | ResultsWord}}</p>
                                        </template>
                                    </el-table-column>
                                    <el-table-column fixed prop="countingStatus" label="盘点状态" width="100">
                                        <template slot-scope="scope">
                                            <p>{{scope.row.countingStatus | StatusWord}}</p>
                                        </template>
                                    </el-table-column>
									<el-table-column 
										v-for="(item,index) in Model.tableHeaderData"
										:key="item.prop"
										:prop="item.prop" 
										:label="item.label" 
										:width="item.width" 
									></el-table-column>
                                    <el-table-column fixed="right" prop="remark" label="备注" width="240">
                                        <template slot-scope="scope">
                                            <el-input
                                                v-if="Model.Outofstock == 0 && scope.row.ToEdit == 0"
                                                type="textarea"
                                                :rows="2"
                                                placeholder="描述文字"
                                                v-model="scope.row.remark">
                                            </el-input>
                                            <span v-else>{{scope.row.remark}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column fixed="right" prop="numberOfSolidOrders" label="实盘数量" width="120">
                                        <template slot-scope="scope">
                                            <el-input-number 
                                                v-if="Model.Outofstock == 0 && scope.row.isEdit == 0 && scope.row.ToEdit == 0" 
                                                v-model="scope.row.numberOfSolidOrders" 
                                                :min="0" 
                                                label="描述文字">
                                            </el-input-number>
                                            <span v-else>{{scope.row.numberOfSolidOrders}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="countingPeople" label="盘点人" width="120"></el-table-column>
                                    <el-table-column prop="countingTime" label="盘点时间" width="120"></el-table-column>
								</el-table>
							</div>
						</el-row>
					</div>
				</div>
				<el-row class="bottom" v-if="Model.Outofstock == 0">
					<div class="btn_group">
						<div class="btn_item" @click="inventoryHandle('保存')">保存</div>
						<div class="btn_item" @click="inventoryHandle('结束盘点')">结束盘点</div>
						<div class="btn_item cancel" @click="goBack">取消</div>
                        <div class="btn_item cancel" @click="submitReport">提交报告</div>
					</div>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./Controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
